<template>
  <div>
    <wt-new-article  v-if="editModetemplate" ref="form" :model="articleList" :type="type" v-model="currentDataRow" @cancel="onCancel" :id="currentId" @saved="onSaved" :params-data="paramsData"></wt-new-article>
    <new-article-url v-else-if="editModeurl" ref="form" :type="type" :model="articleList" v-model="currentDataRow" @cancel="onCancel" :id="currentId" :params-data="paramsData" @saved="onSaved"></new-article-url>
    <template v-else>
      <el-button style="margin-bottom: 10px" type="primary" @click="onAddtemplate" icon="plus">添加模板文章</el-button>
      <el-button style="margin-bottom: 10px" type="primary" @click="onAddurl" icon="plus">添加链接文章</el-button>
      <wt-model-table 
        :auto-load = "true" 
        :page-size = "pageSize" 
        :page-param = "pageParam"  
        :model = "articleList" 
        :min-handle-width = "minWidth" 
        :allow-add = "false" 
        :allow-edit = "false" 
        :allow-remove = "false" 
        ref = "table"
        :is-reload = "true"
        :show-pagination = "true">
        <el-table-column
            label="操作"
            min-width="100"
            >
            <template scope="scope">
                  <el-button @click="edit(scope.row)" size="small" icon="edit">编辑</el-button>
                  <a :href='scope.row.url+"?t="+ Math.random()' target="view_window"><el-button size="small" icon="view">查看</el-button></a>
              </template>
          </el-table-column>
      </wt-model-table>
    </template>
  </div>
</template>
<script>
import Vue from 'vue'
import table from 'winged/components/wt-model-table'
import articleList from '../js/model/article-list'
import wtNewArticle from '../components/wt-new-article'
import newArticleUrl from '../components/new-article-url'
import content from '../components/wt-content-list'
import isPushCheckbox from '../components/is-push-checkbox'
import AddSelect from 'winged/components/wt-add-select'
Vue.component(wtNewArticle.name, wtNewArticle)
Vue.component(content.name, content)
Vue.component(AddSelect.name, AddSelect)
Vue.component(isPushCheckbox.name, isPushCheckbox)
export default {
	name:"wt-article-list",
  components:{
		[[table.name]]:table,
    [[newArticleUrl.name]]:newArticleUrl
	},
  props:{
    // list:{
    //   type : Array,
    //   default : []
    // }
  },
  data(){
    return{
      // articles : this.list,
      articleList : articleList,
      pageParam : "page_index",
			pageSize : 10,
			minWidth : 120,
      editModetemplate : false,
      editModeurl : false,
      currentDataRow : null,
      type : '1',
      paramsData : {},
      isReload : false
    }
  },
  methods:{
    edit(row){
        this.currentId = row.id;
        this.currentDataRow = row;
        if(this.currentDataRow.category){
          this.currentDataRow.category_id = this.currentDataRow.category.id;
        }else{
          this.currentDataRow.category_id = ''
        }   
      if(row.type == 1){
        this.type = '1';
        this.editModetemplate = true;
      }else if(row.type == 2){
        this.type = '2';
        this.editModeurl = true;
      }
      // this.$refs.table.edit(row)
    },
    onAddtemplate() {
      this.type = '1'
      this.currentId = null;
      this.currentDataRow = null;
      this.editModetemplate = true;
			},
    onAddurl(){
      this.type = '2'
      this.currentId = null;
      this.currentDataRow = null;
      this.editModeurl = true;
    },
    onCancel() {
      this.currentId = null;
      this.currentDataRow = null;
      this.editModetemplate = false;
      this.editModeurl = false;
    },
      onSaved(data) {
//				this.shouldRefreshTable = true;
        console.log(data)
				this.editModetemplate = false;
        this.editModeurl = false;
				// 无法使用$refs调用，因为table处于v-if块内，而当前处于editMode
			},
  },
  created(){
    console.log(this.articles)
  }
}
</script>